<template>
  <div class="nowsoon">
    <van-tabs v-model="activeName" title-active-color="#ff5f16" :swipeable="true">

      <van-tab title="正在热映" name="nowPlaying"
      :to="{ name: 'Now-soon', params: { nowsoon: 'nowPlaying' } }">
      <div v-for="item in nowlist" :key="item.filmId+'now'">
        <Film-item :filmobj="item" type="now"></Film-item>
      </div>
      <div class="no-more">- 无更多电影 -</div>
      </van-tab>

      <van-tab title="即将上映" name="comingSoon"
      :to="{ name: 'Now-soon', params: { nowsoon: 'comingSoon' } }">
        <div v-for="item in soonlist" :key="item.filmId+'soon'">
          <Film-item :filmobj="item" type="soon"></Film-item>
        </div>
        <div class="no-more">- 无更多电影 -</div>
      </van-tab>

    </van-tabs>
  </div>
</template>

<script>
// import http from '@/utils/http'
// import axios from 'axios'
import { mapState, mapActions } from 'vuex'
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tab).use(Tabs)

export default {
  data () {
    return {
      activeName: 'nowPlaying'
    }
  },
  computed: {
    ...mapState('cityModule', ['Postcodes']),
    ...mapState('cinemaModule', ['nowlist', 'soonlist'])
  },
  methods: {
    ...mapActions('cinemaModule', ['getCinemasAction'])
  },
  mounted () {
    // 检测每次返回到user的params
    this.activeName = this.$route.params.nowsoon

    this.getCinemasAction()
  }
  // watch: {
  //   $route : function(val, old) {
  //     console.log(val)
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.nowsoon{
  .no-more{
    height: .59rem;
    background-color: #ddd;
    color: #bdc0c5;
    font-size: .3rem;
    text-align: center;
    margin: auto;
    line-height: .59rem;
    box-sizing: border-box;
  }
}
</style>
